<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
		<title>浑水摸鱼</title>
		<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
		<link rel="stylesheet" type="text/css" href="assets/css/select2.min.css">
		<link rel="stylesheet" type="text/css" href="assets/css/dataTables.bootstrap4.min.css">
		<link rel="stylesheet" type="text/css" href="assets/css/bootstrap-datetimepicker.min.css">
		<link rel="stylesheet" type="text/css" href="assets/css/style.css">
		<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.4/dist/bootstrap-table.min.css">
		<!--[if lt IE 9]>
		<script src="assets/js/html5shiv.min.js"></script>
		<script src="assets/js/respond.min.js"></script>
	<![endif]-->
	</head>

	<body>
		<div class="main-wrapper">
			<!-- 导航栏 -->
			<div class="header">
				<div class="header-left">
					<a href="index.html" class="logo">
						<img src="assets/img/logo.png" width="35" height="35" alt=""> <span>浑水摸鱼</span>
					</a>
				</div>
				<a id="toggle_btn" href="javascript:void(0);"><i class="fa fa-bars"></i></a>
				<a id="mobile_btn" class="mobile_btn float-left" href="#sidebar"><i class="fa fa-bars"></i></a>
				<ul class="nav user-menu float-right">
					<li class="nav-item dropdown has-arrow">
						<a href="#" class="dropdown-toggle nav-link user-link" data-toggle="dropdown">
							<span class="user-img"><img class="rounded-circle" src="assets/img/user.jpg" width="40"
									alt="Admin">
								<span class="status online"></span></span>
							<span>Admin</span>
						</a>
						<div class="dropdown-menu">
							<a class="dropdown-item" href="profile.html">My Profile</a>
							<a class="dropdown-item" href="edit-profile.html">Edit Profile</a>
							<a class="dropdown-item" href="settings.html">Settings</a>
							<a class="dropdown-item" href="login.html">Logout</a>
						</div>
					</li>
				</ul>
			</div>
			<div class="sidebar" id="sidebar">
				<div class="sidebar-inner slimscroll">
					<div id="sidebar-menu" class="sidebar-menu">
						<ul>
							<li class="menu-title">主页</li>
							<li>
								<a id="experience"><i class="fa fa-wheelchair"></i> <span>经验</span></a>
							</li>
							<li>
								<a id="arrange"><i class="fa fa-calendar-check-o"></i> <span>维护信息</span></a>
							</li>
							<li class="active">
								<a id="liaisons"><i class="fa fa-user"></i> <span> 联系人 </span></a>
							</li>
							<li>
								<a id="record"><i class="fa fa-calendar"></i> <span> 优化日志 </span></a>
							</li>
							<li>
								<a id="etextxx"><i class="fa fa-comments"></i> <span> Texts </span></a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="page-wrapper">
				<div class="content">
					<div class="row">
						<div class="col-sm-4 col-3">
							<h4 class="page-title">技术经验数据</h4>
							<!-- Patients -->
						</div>
					</div>
					<div class="row align-items-center">
						<div class="col" style="float: left;">
							<span>所属用户:</span>
							<input class="search-input" type="text" name="所属用户" id="operator">
							<span>姓名:</span>
							<input class="search-input" type="text" name="姓名" id="name">
							<span>工作单位:</span>
							<input class="search-input" type="text" name="工作单位" id="employer">
							<span>性别:</span>
							<select id="sex" class="btn btn-outline-dark">
								<option value="">请选择</option>
								<option value="男">男</option>
								<option value="女">女</option>
							</select>
						</div>
						<div class="col-2">
							<button id="search" class="btn btn btn-primary btn-rounded"><i class="fa fa-plus"></i>
								搜索</button>
							<a href="add-liaisons.html" class="btn btn btn-primary btn-rounded "><i
									class="fa fa-plus"></i> 点击增加</a>
						</div>
					</div>
				</div>

				<div class="col-md-12">
					<div class="table-responsive">
						<table class="table table-striped custom-table" id="arrange_table">
							</tr>
						</table>
					</div>
				</div>
			</div>
		</div>
		</div>
		<div class="sidebar-overlay" data-reff=""></div>
		<!-- <script src="assets/js/experience.js"></script> -->
		<script src="assets/js/jquery-3.2.1.min.js"></script>
		<script src="assets/js/popper.min.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>
		<script src="assets/js/jquery.slimscroll.js"></script>
		<script src="assets/js/select2.min.js"></script>
		<script src="assets/js/jquery.dataTables.min.js"></script>
		<script src="assets/js/dataTables.bootstrap4.min.js"></script>
		<script src="assets/js/moment.min.js"></script>
		<script src="assets/js/bootstrap-datetimepicker.min.js"></script>
		<script src="assets/js/app.js"></script>
		<script src="https://unpkg.com/bootstrap-table@1.21.4/dist/bootstrap-table.min.js"></script>
		<script src="https://unpkg.com/bootstrap-table@1.21.4/dist/locale/bootstrap-table-zh-CN.min.js"></script>
		<script>
			var id = getUrlParams('id');
			var level;
			var limtleveledit = 1;
			var limtleveldele = 1;
			var limtleveladd = 1; 
			function getUrlParams(key) {
				var url = window.location.search.substr(1);
				if (url == '') {
					return false;
				}
				var paramsArr = url.split('&');
				for (var i = 0; i < paramsArr.length; i++) {
					var combina = paramsArr[i].split("=");
					if (combina[0] == key) {
						return combina[1];
					}
				}
				return false;
			}
			$('#experience').attr('href', 'experience.html?id=' + id);
			$('#arrange').attr('href', 'arrange.html?id=' + id);
			$('#liaisons').attr('href', 'liaisons.html?id=' + id);
			$('#record').attr('href', 'record.html?id=' + id);
			$('#etextxx').attr('href', 'etextxx.html?id=' + id);
			$('#search').click(function() {
				$('#arrange_table').bootstrapTable('refresh');
			});

			//限制用户增删改的等级等级分别为0 1 2
			//从后端获取用户的等级
			$.ajax({
				type: 'GET',
				dataType: 'json',
				url: 'http://localhost:8080/back/user/detail/' + id,
				contentType: "application/json",
				async: false,
				success: function(d) {
					level = Number(d.data.level);
					if (level < 0) {
						alert("当前用户没有登录权限！！");
						window.location.href = 'login.html';
					}
				},
				error: function(d) {
					console.log(d)
					alert("当前用户没有登录！！");
					window.location.href = 'login.html';
				}
			})
			console.log(level);
			if (level < limtleveladd) {
				// 由于add是用a标签跳转，因此当等级不够时，将跳转链接改为当前页面空
				$('#add').attr('href', '');
			}

			function timestampToTime(timestamp) {
				timestamp = timestamp ? timestamp : null;
				let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let Y = date.getFullYear() + '-';
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return Y + M + D + h + m + s;
			}

			function actionFormatter(value, row, index) {
				var id = value;
				var result = "";
				// result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
				result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id +
					"')\" title='编辑'><span class='glyphicon glyphicon-pencil'>编辑</span></a>";
				result += "<a href='javascript:;' class='btn btn-xs red' id='" + id + "' onclick=\"DeleteById('" + id +
					"')\" title='删除'><span class='glyphicon glyphicon-remove'>删除</span></a>";
				return result;
			}

			function EditViewById(id) {
				if (level < limtleveledit) {
					alert("没有权限!!");
					return false;
				}
				url = "edit-liaisons.html?id=" + id;
				window.location.href = url;
			}

			function DeleteById(id) {
				if (level < limtleveldele) {
					alert("没有权限!!");
					return false;
				}
				if (window.confirm("您确定要删除数据吗?")) {
					$('#' + id).parent().parent().remove()
					$.ajax({
						type: 'DELETE',
						dataType: 'json',
						url: 'http://localhost:8080/back/liasons/delete/' + id,
						contentType: "application/json",
						success: function(d) {
							console.log(d)
							if (d.code == '200') {
								alert("删除成功！")
							} else {
								alert("添加失败！")
							}
						},
						error: function(d) {
							console.log(d)
							alert("删除失败")
						}
					})
				}
			}
			// actionFormatter
			// function postdata(url, paprem) {
			$.ajax({
				type: 'GET',
				dataType: 'json',
				url: 'http://localhost:8080/back/experience/page',
				contentType: "application/json",
				success: function(d) {
					console.log(d);
				}
			})
			var columns = [{
				checkbox: false,
				visible: false //是否显示复选框  
			}, {
				field: 'id',
				title: 'ID',
			}, {
				field: 'operator',
				title: '所属用户',
			}, {
				field: 'name',
				title: '姓名',
			}, {
				field: 'sex',
				title: '性别',
			}, {
				field: 'phonenum',
				title: '电话'
			}, {
				field: 'email',
				title: '邮箱',
			}, {
				field: 'employer',
				title: '工作单位'
			}, {
				field: 'abode',
				title: '住址',
			}, {
				field: 'id',
				title: '操作',
				width: 120,
				align: 'center',
				valign: 'middle',
				formatter: actionFormatter
			}]
			$('#arrange_table').bootstrapTable({
				method: 'get', // 请求方式
				contentType: 'application/json; charset=UTF-8',
				url: 'http://localhost:8080/back/liaisons/list', //请求地址 
				dataField: 'data', //返回数据参数
				pagination: true, //是否开启分页
				pageNumber: 1, // 分页当前
				pageSize: 2, //每页的记录行数（*）
				pageList: [2, 4, 6], //可选分页
				paginationPreText: '上一页',
				paginationNextText: '下一页',
				sidePagination: "client", //服务端分页
				columns: columns,
				cache: false,
				responseHandler: function(data) {
					// 对返回参数进行处理
					var length = $(data.data).length
					for (var i = 0; i < length; i++) {
						data.data[i]["pubdate"] = timestampToTime(Number(data.data[i]["pubdate"]));
					}
					console.log(data);
					return data;
				},
				queryParams: function(param) {
					var operator = $.trim($('#operator').val())
					var name = $.trim($('#name').val())
					var sex = $.trim($('#sex').val())
					var employer = $.trim($('#employer').val())
					var temp = {};
					if (operator != null && operator != '' && operator != undefined) {
						temp["operator"] = operator;
					}
					if (name != null && name != '' && name != undefined) {
						temp["name"] = name;
					}
					if (sex != null && sex != '' && sex != undefined) {
						temp["sex"] = sex;
					}
					if (employer != null && employer != '' && employer != undefined) {
						temp["employer"] = employer;
					}
					console.log(temp)
					return temp
				}
			})
		</script>

	</body>

</html>
